<template>


    <div style="height: 70%;width: 100%" >
        <div style="text-align: center;color: red;font-weight: bolder">
            近一周情况
        </div>
        <div id="container" style="height: 70%;width: 100%"></div>
        <div style="margin-left: 50px;margin-top: -30px">
            <template>

                <el-table

                        height="300"
                        :data="tableData.filter(data => !search || data.date.toLowerCase().includes(search.toLowerCase())|| data.zhengzhuang.toLowerCase().includes(search.toLowerCase())|| data.username.toLowerCase().includes(search.toLowerCase()))"
                        style="width: 100%"
                        :default-sort = "{prop: 'date', order: 'descending'}"
                >
                    <el-table-column
                            prop="date"
                            label="日期"
                            sortable
                            width="180">
                    </el-table-column>

                    <el-table-column
                            prop="username"
                            label="姓名"
                            sortable
                            width="120">
                    </el-table-column>
                    <el-table-column
                            prop="phone"
                            label="手机号"
                            sortable
                            width="140">
                    </el-table-column>
                    <el-table-column
                            prop="fare"
                            label="发热"
                            sortable
                            width="100">
                    </el-table-column>
                    <el-table-column
                            prop="kangyuan"
                            label="抗原结果"
                            sortable
                            class-name="kangyuanclass"
                            width="140">
                    </el-table-column>
                    <el-table-column
                            prop="zhengzhuang"
                            label="异常类型"
                            sortable
                            width="170">
                    </el-table-column>
                    <el-table-column
                            :formatter="recoveryFormatter"
                            prop="recovery"
                            label="是否痊愈"
                            sortable
                            width="110">
                    </el-table-column>
                    <el-table-column>
                        <template slot="header" slot-scope="scope">
                            <el-input
                                    v-model="search"
                                    size="mini"
                                    placeholder="输入关键字搜索"/>
                        </template>
                    </el-table-column>

                    <el-table-column
                            fixed="right"
                            label="操作"
                            width="100">
                        <template slot-scope="scope">
                            <div style="flex: 2">
                                <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                            </div>

                        </template>
                    </el-table-column>

                </el-table>
                <el-pagination
                        small
                        @size-change="handleSizeChange"
                        :current-page.sync="currentPage"
                        @current-change="handleCurrentChange"
                        layout="prev, pager, next"
                        :total="70">
                </el-pagination>


                <el-dialog
                        title="提示"
                        :visible.sync="dialogVisible"
                        width="30%"
                        >
                    <div class="demo-image">
                        <a :href="url" target="_blank" >查看抗原图片</a>
                    </div>
                    <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
                </el-dialog>


            </template>
        </div>

    </div>


</template>

<script>
    import * as echarts from 'echarts';
    // eslint-disable-next-line no-unused-vars
    import {request} from '@/axios/request'
    export default {
        name: "count",
        data() {
            return {
                url :"http://rtk1qlou0.hd-bkt.clouddn.com/948c902a-8946-4ad0-aea7-55ec73fc917aQQ截图20230409173142.jpg",
                currentPage:1,
                search: '',
                tableData: [{
                    date: '2017-05-02',
                    username: '王小虎',
                    sushe: '上海市普陀区金沙江路 1518 弄',
                    phone:"12345678900",
                    fare:"是",
                    zhengzhuang:"甲流",
                    kangyuan:"阳性",
                    recovery:""
                }, {
                    date: '2016-05-02',
                    username: '王小虎',
                    sushe: '上海市普陀区金沙江路 1518 弄',
                    phone:"12345678900",
                    fare:"否",
                    zhengzhuang:"疑似甲流",
                    kangyuan:"无",
                    recovery:""
                }, {
                    date: '2016-05-02',
                    username: '王小虎',
                    sushe: '上海市普陀区金沙江路 1518 弄',
                    phone:"12345678900",
                    fare:"是",
                    zhengzhuang:"新冠",
                    kangyuan:"阳性",
                    recovery:""
                }, {
                    date: '2016-05-02',
                    username: '王小虎',
                    sushe: '上海市普陀区金沙江路 1518 弄',
                    phone:"12345678900",
                    fare:"是",
                    zhengzhuang:"疑似甲流",
                    kangyuan:"无",
                    recovery:""
                },{
                    date: '2016-05-02',
                    username: '王小虎',
                    sushe: '上海市普陀区金沙江路 1518 弄',
                    phone:"12345678900",
                    fare:"是",
                    zhengzhuang:"疑似甲流",
                    kangyuan:"无",
                    recovery:""
                }],

                dialogVisible: false,
                confirmed: [],
                suspected: [],
                source: []
            }
        },
        mounted() {
            this.getNoHealthDATA();
            this.getTableData()
        },
        methods: {
            handleClick(row){
                console.log(row)
                this.dialogVisible = true;
                this.url = "http://"+row.url
                console.log(this.url)
            /*    this.url = "http://" + row.url
                console.log(this.url)*/

            },
            recoveryFormatter(row,index){
                if (row.recovery == '0'){
                    return "否"
                }
                    return "是"

            },
            getTableData() {
                request({
                    url: "/api/health/list/"+this.currentPage,
                    method: "get",
                }).then((res) => {
                    if (res.data.stateCode == 200){
                        this.tableData = res.data.object
                    }
                })
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);

            },
            handleCurrentChange(val) {
                this.currentPage = val
                this.getTableData()
                console.log(`当前页: ${val}`);
            },
            formatter(row, column) {
                return row.address;
            },
            getNoHealthDATA() {
                request({
                    url: "/api/health/sourceData",
                    method: "get",
                }).then((res) => {
                    console.log(res.data.object[0].confirmed)
                    for (let i = 0; i < 3; i++) {
                        this.confirmed[i] = Number(res.data.object[i].confirmed)
                        this.suspected[i] = Number(res.data.object[i].suspected)
                    }
                    console.log(this.confirmed[0])
                    // 异步加载数据完成后再进行图表绘制
                    this.drawChart();
                })
            },
            drawChart() {
                var myChart = echarts.init(document.getElementById('container'));
                var option = {
                    legend: {},
                    tooltip: {},
                    xAxis: {
                        type: 'category',
                        data: ['甲流', '新冠', '诺如']
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        name: '确诊',
                        type: 'bar',
                        data: this.confirmed,
                        itemStyle: {
                            color: '#FF0000' // 设置确诊数据颜色为红色
                        }
                    },
                        {
                            name: '疑似',
                            type: 'bar',
                            data: this.suspected,
                            itemStyle: {
                                color: '#FFA500' // 设置疑似数据颜色为橙色
                            }
                        }
                    ]
                };
                myChart.setOption(option);
                window.addEventListener('resize', myChart.resize);
            }
        }

    }
</script>

<style scoped>
    .chat-wrapper {
        background-image: url(../../static/image/9991.jpg);
        background-size: cover;
        background-position: center center;
    }

</style>
